<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header id="header"><span>我要发帖</span></header>
    <section>
        <ul id="postList">
            <!-- <li class="postes">
                <div>
                    <img src="images/tou01.jpg" alt="">
                </div>
                <h1>title</h1>
                <p><span> "aaa,adsadasdasdasd"</span></p> 
            </li> -->
        </ul>
    </section>
    <div class="post" id="post">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="title">
        所属版块：<select id="sec"><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content" id="content"></textarea>
        <input type="button" id="publish" class="btn" value="发布">
    </div>
</div>
<script>
   var header = document.getElementById("header");
   header.addEventListener("click",function(){
       document.getElementById("post").style.display = "block";
       document.getElementById('postList').style.display = "none";
   },false)

   var publish = document.getElementById("publish");
   publish.addEventListener("click",function(){
        var title = document.getElementById("title").value;
        var type = document.getElementById("sec").value;
        var content = document.getElementById("content").value;
        console.log(content);
        document.getElementById("post").style.display = "none";
        var html = `
       
                <div>
                    <img src="images/tou01.jpg" alt="">
                </div>
                <h1>${title}</h1>
                <p><span>${content} </span></p> 
          
        `;
        var li = document.createElement("li");
        li.innerHTML = html;
        document.getElementById("postList").appendChild(li);
        document.getElementById('postList').style.display = "block";
   },false);
</script>
</body>
</html>